import React from 'react';
import {
    ActivityIndicator,
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList, TouchableOpacity,DeviceEventEmitter
} from 'react-native';

//引入
import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';
import Styles from './Styles';
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Utils from "../../utils/Utils";

const { width, height } = Dimensions.get('window')

export default class CateLists extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            type: 0,
            days: 7,
            page: 0,
            rows: 10,
            total: 0,
            totalpage: 1,
            lists: [],
            loaded: true,
            refreshing: false,
        };
        this.listener=null;
    }
    static navigationOptions = {
        //title: '彩票咨询',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#ff0000',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentWillMount() {
       
    }
    componentWillMount() {
        //组件将要被加载到视图之前调用
        this.setState({
            isLogin: Ugame.isLogin()
        });
    }
    componentDidMount() {
        this.listener = DeviceEventEmitter.addListener('updateRankLists', (value) => {
            //这里面是要调用的方法，比如：刷新
            //value:是下面页面在 通知 时 ，所传递过来的参数
            this.setState({
                days:value.days,
                page: 0,
                total: 0,
                totalpage: 1,
                lists: [],
            }, () => {
                this.getServerData(() => { });
            });

        });
        this.setState({
            type: this.props.type,
            days: this.props.days
        },()=>{
            this.getServerData(() => { });
        })
       
    }
    getServerData(callback) {
        let _this = this;
        let params = {};
        let { type, days, page, rows, lists } = this.state;
        params.rootid = app.rootid;
        params.type = type;
        params.days = days;
        params.page = page + 1;
        params.rows = rows;
        Httpc.get(REQUEST.GetFollowRank, params, function (res) { 
            if (res.StatusCode == 1) {
                if (res.Data.length > 0) {
                    _this.setState({
                        type: type,
                        page: page + 1,
                        rows: rows,
                        total: res.total,
                        totalpage: res.totalpage,
                        lists: lists.concat(res.Data),
                    });
                    callback();
                }
            }
        })
    }
    _on_GetUserGodsDetail = (user) => {
        if (Ugame.isLogin()) {
            let head =  require('../../image/js_img_user_head.png');
            if (!!user.head) {
                head = { uri: 'data:image/png;base64,' + user.head };
            }
            user.head_img=head;
            this.props.navigation.navigate('UserDetailed', {
                user: user
            });
        } else {
            this.props.navigation.navigate('Login');
        }
    }
    _createNewsItem = ({ item }) => {
        let { type } = this.state;
        let head =  require('../../image/js_img_user_head.png');
        if (!!item.head) {
            head = { uri: 'data:image/png;base64,' + item.head };
        }
        let wei = null;
        let head_css = {};
        if (item.odid == 1) {
            wei = require('../../image/js_img_rank_followorder_one.png');
            head_css = { width: 40, height: 40, borderRadius: 40, borderColor: '#f6ce07', borderWidth: 2 };
        } else if (item.odid == 2) {
            wei = require('../../image/js_img_rank_followorder_two.png');
            head_css = { width: 40, height: 40, borderRadius: 40, borderColor: '#d8d8d8', borderWidth: 2 };
        } else if (item.odid == 3) {
            wei = require('../../image/js_img_rank_followorder_three.png');
            head_css = { width: 40, height: 40, borderRadius: 40, borderColor: '#88683c', borderWidth: 2 };
        }else{
            head_css = { width: 40, height: 40, borderRadius: 40};
        }
        item.mark = type != 3 ? Number(item.mark).toFixed(2) : Number(item.mark);
        var myreg = /^[1][0-9][0-9]{9}$/;
        return (
            <TouchableOpacity onPress={() => this._on_GetUserGodsDetail(item)}>
            <View style={Styles.recommend_lists}>
            
                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={item.odid <= 3 ? { color: '#d0162e' } : { color: '#666666' }}>{item.odid}</Text>
                    {item.odid <= 3 ?
                        <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginLeft: 10, marginTop: -16 }}>
                            <Image resizeMode="cover" style={{ top: 10, left: -15, width: 15, height: 15 }} source={wei} />
                            <Image resizeMode="cover" style={head_css} source={head} />
                        </View> :
                        <View style={{marginLeft: 10}}><Image resizeMode="cover" style={head_css} source={head} /></View>
                    }
                    <Text style={{ color: '#333333', marginLeft: 10 }}>
                    {myreg.test(item.nick) ? Utils.plusXing(item.nick, 3, 6) : item.nick}                   
                    </Text>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={{ color: '#d0162e', fontSize: 20 }}>{item.mark}</Text>
                    {type != 3 ? <Text style={{ color: '#d0162e' }}>%</Text> : null}
                </View>                
            </View>
            </TouchableOpacity>
        );
    }
    _onRefresh = () => {
        if (this.state.refreshing) {
            return;
        }
        this.setState({ refreshing: true });
        let _this = this;
        let params = {};
        let { type, rows, days } = this.state;
        params.rootid = app.rootid;
        params.type = type;
        params.days = days;
        params.page = 1;
        params.rows = rows;
        Httpc.get(REQUEST.GetFollowRank, params, function (res) {
            console.log(res);
            if (res.StatusCode == 1) {
                if (res.Data.length > 0) {
                    _this.setState({
                        type: type,
                        page: 1,
                        rows: rows,
                        total: res.total,
                        totalpage: res.totalpage,
                        lists: res.Data,
                    });
                }
            }
            _this.setState({ refreshing: false });
        })
    }
    _onEndReached() {
        this.getServerData(() => { });
    }
    _separator() {
        return <View style={{ height: 0.5, backgroundColor: '#ededed' }} />;
    }
    render() {
        let { lists } = this.state;
        return (
            <View style={Styles.container}>
                <FlatList
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                        />
                    }
                    data={lists}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={this._createNewsItem}
                    onEndReached={this._onEndReached.bind(this)}
                    onEndReachedThreshold={20}
                    ItemSeparatorComponent={this._separator}
                />
            </View>
        )
    }



}
